<%--
    Document   : user_pestanas
    Created on : 10-27-2010, 07:36:01 PM
    Author     : Dada
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<HTML>
<HEAD>
<TITLE>Lista de Abonados</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="javascript/ext-base.js"></script>
<script type="text/javascript" src="javascript/ext-all.js"></script>

    <script type="text/javascript">



        function  clickBuscarAbonados(){
            var hiddenAction=document.getElementById("action");
            hiddenAction.value="reporte_abonado";
        }
        function  clickFiltrarAbonado(){
            var hiddenAction=document.getElementById("action");
            hiddenAction.value="reporte_abonado";
        }
        function  clickCrear_Abonado(){
            var hiddenAction=document.getElementById("action");
            hiddenAction.value="crear_abonado";
        }

        function  cambiaProvincia(){
                var departamento=document.getElementById("departamento").value;
                var fltrlinea=document.getElementById("fltrlinea").value;
                var fltrtipolinea=document.getElementById("fltrtipolinea").value;
                var fltrnombre=document.getElementById("fltrnombre").value;
                var fltrapelpat=document.getElementById("fltrapelpat").value;
                var fltrapelmat=document.getElementById("fltrapelmat").value;
                var fltrdireccion=document.getElementById("fltrdireccion").value;
                var fltrcampana=document.getElementById("fltrcampana").value;
                window.location="AbonadoServlet?action=reporte_abonado&departamento="+departamento+"&fltrlinea="+fltrlinea+"&fltrtipolinea="+fltrtipolinea+"&fltrnombre="+fltrnombre+"&fltrapelpat="+fltrapelpat+"&fltrapelmat="+fltrapelmat+"&fltrdireccion="+fltrdireccion+"&fltrcampana="+fltrcampana;

            }
        function  cambiaDistrito(){
                var departamento=document.getElementById("departamento").value;
                var provincia=document.getElementById("provincia").value;
                var fltrlinea=document.getElementById("fltrlinea").value;
                var fltrtipolinea=document.getElementById("fltrtipolinea").value;
                var fltrnombre=document.getElementById("fltrnombre").value;
                var fltrapelpat=document.getElementById("fltrapelpat").value;
                var fltrapelmat=document.getElementById("fltrapelmat").value;
                var fltrdireccion=document.getElementById("fltrdireccion").value;
                var fltrcampana=document.getElementById("fltrcampana").value;
                window.location="AbonadoServlet?action=reporte_abonado&departamento="+departamento+"&provincia="+provincia+"&fltrlinea="+fltrlinea+"&fltrtipolinea="+fltrtipolinea+"&fltrnombre="+fltrnombre+"&fltrapelpat="+fltrapelpat+"&fltrapelmat="+fltrapelmat+"&fltrdireccion="+fltrdireccion+"&fltrcampana="+fltrcampana;;

            }



            -->

    </script>
<script type="text/javascript">
		function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}

function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}

var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		butt_01_over = newImage("images/butt_01-over.jpg");
		butt_02_over = newImage("images/butt_02-over.jpg");
		butt_03_over = newImage("images/butt_03-over.jpg");
		butt_04_over = newImage("images/butt_04-over.jpg");
		butt_05_over = newImage("images/butt_05-over.jpg");
		butt_06_over = newImage("images/butt_06-over.jpg");
		preloadFlag = true;
	}}


    var dataStoreAbonados;
    Ext.onReady(function(){

        /*Ahora se cargan los stores del segundo Panel: el de resultados de la busqueda*/

        var urlAbonados="AbonadoServlet?action=listaAbonados";

        var gridAbonadosReader = new Ext.data.JsonReader({ root: 'data',
            totalProperty: 'totalCount',
            fields: [
                { name: 'livecondition' },
                { name: 'idabonado' },
                { name: 'linea' },
                { name: 'tipolinea' },
                { name: 'nombre' },
                { name: 'apelp' },
                { name: 'apelm' },
                { name: 'dep' },
                { name: 'prov' },
                { name: 'dist' },
                { name: 'dir' },
                { name: 'camp' }

            ]});

        dataStoreAbonados = new Ext.data.Store({
            url: urlAbonados,
            remoteSort: false,
            reader: gridAbonadosReader
        });


        
        dataStoreAbonados.on('beforeload', function(store,options) {
                var filtrosBusqueda= {'fltrlinea' : document.getElementById("fltrlinea").value,
                                      'fltrtipolinea' : document.getElementById("fltrtipolinea").value,
                                      'fltrnombre' : document.getElementById("fltrnombre").value,
                                      'fltrapelpat' : document.getElementById("fltrapelpat").value,
                                      'fltrapelmat' : document.getElementById("fltrapelmat").value,
                                      'fltrdireccion' : document.getElementById("fltrdireccion").value,
                                      'fltrcampana' : document.getElementById("fltrcampana").value  };

                Ext.apply(options.params,filtrosBusqueda);
         });

        var pagingBar = new Ext.PagingToolbar({
            pageSize: 10,
            store: dataStoreAbonados,
            displayInfo: true,
            displayMsg: 'Mostrando Abonados {0} - {1} de {2}'
        });

        var gridAbonados=new Ext.grid.GridPanel({
            store: dataStoreAbonados,
            columns: [
                {
                    header: 'Estado', sortable:true,dataIndex:'livecondition',width:50,renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                                metaData.css = 'multilineColumn'; return value;

                            }
                },
                {
                    header: 'Anexo', sortable:true,dataIndex:'linea',width:50,renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                                metaData.css = 'multilineColumn'; return value;

                            }
                },
                {
                    header: 'Tipo', sortable:true, dataIndex:'tipolinea',width:40,renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                                metaData.css = 'multilineColumn'; return value;
                            }
                },
                {
                    header: 'Nombre', sortable:true, dataIndex:'nombre',width:60,renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                                metaData.css = 'multilineColumn'; return value;
                            }
                },
                {
                    header: 'Apellido P', sortable:true, dataIndex:'apelp',width:50,renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                                metaData.css = 'multilineColumn'; return value;
                            }
                },
                {
                    header: 'Apellido M', sortable:true, dataIndex:'apelm',width:50,renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                                metaData.css = 'multilineColumn'; return value;
                            }
                },
                {
                    header: 'Departamento', sortable:true, dataIndex:'dep',width:70,renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                                metaData.css = 'multilineColumn'; return value;
                            }
                },
                {
                    header: 'Provincia', sortable:true, dataIndex:'prov',width:70,renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                                metaData.css = 'multilineColumn'; return value;
                            }
                },
                 {
                    header: 'Distrito', sortable:true, dataIndex:'dist',width:70,renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                                metaData.css = 'multilineColumn'; return value;
                            }
                },
                {
                    header: 'Direccion', sortable:true, dataIndex:'dir',width:130,renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                                metaData.css = 'multilineColumn'; return value;
                            }
                },
                {
                    header: 'Campana', sortable:true, dataIndex:'camp',width:120,renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                                metaData.css = 'multilineColumn'; return value;
                            }
                },
                {
                    header: 'Acciones', dataIndex:'idabonado',width:50,renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                        metaData.css = 'multilineColumn';
                        var cadena = "<a href='AbonadoServlet?action=modificar_abonado&idabonado="+value+"&dir="+record.data.dir+"&distrito="+record.data.dist+"&provincia="+record.data.prov+"&departamento="+record.data.dep+"&linea="+record.data.linea+"&tipolinea="+record.data.tipolinea+"'><img src=\"images/icon_edit.gif\"  alt=\"Modificar Abonado\"></a>"+
                           "<a onclick='if (confirm(\"¿Esta seguro que desea desactivar el abonado?\")) {return true;} else {return false;}' href='AbonadoServlet?action=eliminar_abonado&idabonado="+value+"'><img src=\"images/icon_delete.gif\"  alt=\"Eliminar Abonado\"></a>";
                            
                        return cadena;
                    }
                }
            ],
            bbar: pagingBar,
            loadMask: true,
            frame: false,
            viewConfig: {
              forceFit: true
            }
        });

        var panelGrid=new Ext.Panel({
            width:1000,
            height:380,
            layout: 'fit',
            items: [gridAbonados],
            autoScroll:true
        });

         var panelBusqueda = new Ext.FormPanel
         ({
                    renderTo: 'gridAbonados',
                    layout: 'anchor',
                    frame:true,
                    monitorValid:true,
                    title: 'Resultados de la Busqueda',
                    width: 1000,
                    items: [panelGrid]
         });

        dataStoreAbonados.load({params: {start: 0, limit:10}});

   });
    </script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<link href="general.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">

</HEAD>
<BODY BGCOLOR=#133F54 ONLOAD="preloadImages();" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center">
  <TABLE WIDTH=1000 BORDER=1 CELLPADDING=0 CELLSPACING=0>
    <TR>
      <TD width="178" height="218" align="center" valign="middle" class="logo"><p><strong>Chasqui-soft</strong></p>
      <p><img src="images/defaultlogo.gif" width="48" height="48" alt="logo"></p></TD>
      <TD width="1271" align="left" valign="top"><img src="images/callcenter_banner.jpg" width="1009" height="216" alt="banner"></TD>
    </TR>
    <TR>

      <TD height="152"><img src="images/info_area.jpg" alt="back" width=178 height=320></TD>
      <TD rowspan="3" align="center" valign="top"><table width="1000" height="516" border="0" cellspacing="0">
        <tr>
          <td width="900" height="516" align="center" valign="top" scope="col"><p>&nbsp;</p>
            <p class="Titlulos_General">Lista de Abonados</p>
            <p class="Titlulos_General">&nbsp;</p>
            <p class="Titlulos_General"><img src="images/t_19.jpg" width="500" height="2" alt="serparador"></p>
            <p class="Titlulos_General">&nbsp;</p>
            
            <table height="250" border="1">
                <form name ="prueba" method="post" action="AbonadoServlet">
                <input type="hidden" name="action" id="action" value="">
                <tr>
                      <td width="226" class="texto">Linea: </td>
                      <td width="220"><label>
                        <input name="fltrlinea" type="text" id="fltrlinea" value="${requestScope.fltrlinea}" size="30" maxlength="70">
                        </label></td>
                      <td width="275"><span class="texto">Tipo de l&iacute;nea: </span></td>
                      <td width="227"><select name="fltrtipolinea" id="fltrtipolinea">
                        <option selected="selected">${requestScope.fltrtipolinea}</option>
                        <c:forEach var="fltrtipolineas" items="${requestScope.fltrtipolineas}">
                          <option value ="${fltrtipolineas.idTipoLinea}">${fltrtipolineas.nombre}</option>
                        </c:forEach>
                      </select></td>
                </tr>
               
                <tr>
                    <td width="226" class="texto">Nombre: </td>
                    <td><input name="fltrnombre" type="text" id="fltrnombre" value="${requestScope.fltrnombre}" size="30" maxlength="70"></td>
                    <td><span class="texto">Apellido Paterno: </span></td>
                    <td><input name="fltrapelpat" type="text" id="fltrapelpat" value="${requestScope.fltrapelpat}" size="30" maxlength="70"></td>
                  </tr>

           <%--      <tr>
                    <td colspan="2">&nbsp;</td>
                    <td class="texto">Tipo de l&iacute;nea <td width="211">
                        <select name="fltrtipolinea" id="fltrtipolinea" onChange ="cambiaTipoLinea(this.selectedIndex); return true">
                      <c:forEach var="fltrtipolineas" items="${requestScope.fltrtipolineas}">
                         <option value ="${fltrtipolineas.idTipoLinea}">${fltrtipolineas.nombre}</option>
                      </c:forEach>
                    </select></td>
                </tr>--%>


                <tr>
                      <td width="226" class="texto">Apellido Materno: </td>
                      <td><input name="fltrapelmat" type="text" id="fltrapelmat" value="${requestScope.fltrapelmat}" size="30" maxlength="70"></td>
                      <td><span class="texto">Departamentos:</span></td>
                      <td><select name="departamento" id="departamento" onChange ="cambiaProvincia(); return true">
                        <option selected="selected">Seleccionar</option>
                        <c:forEach var="departamentos" items="${requestScope.departamentos}">
                          <option value ="${departamentos.idDepartamento}"> ${departamentos.descripcion}</option>
                          <c:forEach var="depa" items="${requestScope.depstr}">
                            <c:if test="${depa == departamentos.descripcion}">
                              <option selected="true" value="${departamentos.idDepartamento}"> ${depa} </option>
                            </c:if>
                          </c:forEach>
                        </c:forEach>
                      </select></td>
                </tr>
                <tr>
                      <td width="226" class="texto">Provincias:</td>
                      <td><b>
                        <select name="provincia" id="provincia"  onChange ="cambiaDistrito(); return true">
                          <option selected="selected">Seleccionar</option>
                          <c:forEach var="provincias" items="${requestScope.provincias}">
                            <option value ="${provincias.idProvincia}"> ${provincias.descripcion}</option>
                            <c:forEach var="provi" items="${requestScope.strprovincia}">
                              <c:if test="${provi == provincias.descripcion}">
                                <option selected="true"  value="${provincias.idProvincia}"> ${provi} </option>
                              </c:if>
                            </c:forEach>
                          </c:forEach>
                        </select>
                      </b></td>
                      <td><span class="texto">Distrito:</span></td>
                      <td><select name="distrito" id="distrito">
                        <option selected="selected">Seleccionar</option>
                        <c:forEach var="distritos" items="${requestScope.distritos}">
                          <option value ="${distritos.idDistrito}">${distritos.descripcion}</option>
                        </c:forEach>
                      </select></td>
                </tr>
                <tr>
                      <td width="226" class="texto">Direccion: </td>
                      <td><input name="fltrdireccion" type="text" id="fltrdireccion" value="${requestScope.fltrdireccion}" size="30" maxlength="70"></td>
                      <td><span class="texto">Campa&ntilde;a: </span></td>
                      <td><input name="fltrcampana" type="text" id="fltrcampana" value="${requestScope.fltrcampana}" size="30" maxlength="70"></td>
                </tr>
                <tr>
                    <td class="texto">
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td width="226" height="46" class="texto">&nbsp;</td>
                    <td>&nbsp;</td>
                    <td><span class="texto">Si desea una busqueda mas personalizada:</span></td>
                    <td><input type="submit" onClick="clickFiltrarAbonado();return true;" name="filtrarabonado" id="filtrarabonado" value="   Filtrar Abonado   "></td>
                 </tr>




                <tr>
                            <td height="28" colspan="4" align="right"><table width="300" border="0" cellspacing="0">
                            <%---
                              <tr>
                                <th align="right" scope="col"><input type="submit" onClick="clickBuscarAbonados();return true;" name="relacionabonado" id="reacionabonado" value="Buscar"></th>
                              </tr>
                              ---%>
                            </table></td>
                  </tr>
                </form>
       </table>
            <table width="300" border="0" cellspacing="0">
                <div style="display:none; border: 0px;" id="NavPosicion"></div>
              <tr>
                <th height="255" valign="top" scope="col"><table width="300" border="0" cellspacing="0">
                  <tr>
                   <td>
                       <div id="gridAbonados"></div>
                    <!--table id="tablaabonados" width="958" height="144" border="1">
                    <tr class="texto">
                        <td width="84"><div align="center"><strong>Condicion</strong></div></td>
                        <td width="109"><div align="center"><strong>Anexo</strong></div></td>
                        <td width="149"><div align="center"><strong>Tipo de Anexo</strong></div></td>
                        <td width="136"><div align="center"><strong>Nombre</strong></div></td>
                        <td width="173"><div align="center"><strong>Apellido Paterno</strong></div></td>
                        <td width="173"><div align="center"><strong>Apellido Materno</strong></div></td>
                        <td width="173"><div align="center"><strong>Departamento</strong></div></td>
                        <td width="173"><div align="center"><strong>Provincia</strong></div></td>
                        <td width="173"><div align="center"><strong>Distrito</strong></div></td>
                        <td width="154"><div align="center"><strong>Direccion</strong></div></td>
                        <td width="84"><div align="center"><strong>Campaña</strong></div></td>
                        <td width="84"><div align="center"><strong>Acciones</strong></div></td>
                    </tr>
                    <form action="AbonadoServlet" method="POST">
                        <input type="hidden" name="action" id="action" value="">
                    <c:forEach var="listabonados" items="${requestScope.listabonados}">
                    <tr>
                        <td><div align="center" class="tablas">${listabonados.livecondition}</div></td>
                        <td><div align="center" class="tablas">${listabonados.linea}</div></td>
                        <td><div align="center" class="tablas">${listabonados.tipolinea}</div></td>
                        <td><div align="center" class="tablas">${listabonados.nombre}</div></td>
                        <td><div align="center" class="tablas">${listabonados.apelp}</div></td>
                        <td><div align="center" class="tablas">${listabonados.apelm}</div></td>
                        <td><div align="center" class="tablas">${listabonados.dep}</div></td>
                        <td><div align="center" class="tablas">${listabonados.prov}</div></td>
                        <td><div align="center" class="tablas">${listabonados.dist}</div></td>
                        <td><div align="center" class="tablas">${listabonados.dir}</div></td>
                        <td><div align="center" class="tablas">${listabonados.camp}</div></td>

                        <td><label>
                                <div align="center">
                                    <a href="AbonadoServlet?action=modificar_abonado&idabonado=${listabonados.idabonado}&dir=${listabonados.dir}&distrito=${listabonados.dist}&provincia=${listabonados.prov}&departamento=${listabonados.dep}&linea=${listabonados.linea}&tipolinea=${listabonados.tipolinea}"><input name="Modificar" type="button" value="Modificar"></a>
                                    <a href="AbonadoServlet?action=desactiva_abonado&idabonado=${listabonados.idabonado}"><input name="Eliminar" type="button" value="Eliminar"></a>
                                </div>
                            </label></td>
                    </tr>
                    </c:forEach>
                    </form>

                </table-->
                        </td>
                    </tr>
                    <tr>
                        <td height="81">
                        <table width="976" height="79" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td height="50" colspan="2" align="center" valign="middle"><span class="Titlulos_General"><img src="images/t_19.jpg" width="500" height="2" alt="serparador"></span></td>
                            </tr>
                          <tr>
                          <td width="880" height="19" align="right" class="texto">Si desea agregar un nuevo abonado:                            </td>
                          <td width="96" align="left"><a href="AbonadoServlet?action=crear_abonado"><input type="submit" name="Buscar22" id="Buscar22" value="Agregar"></a></td>
                          </tr>
                        </table>
                        </td>
                  </tr>
                </table></th>
              </tr>
            </table>
            </td>
        </tr>
      </table></TD>
    </TR>
    <TR>

      <TD width="178" height="208" valign="top" bgcolor="#E4560B"><ul id="MenuBar1" class="MenuBarVertical">
        <li><a href="index2.jsp">Home</a>          </li>
        <li><a href="clientes2.jsp">Clientes</a></li>
        <li><a href="usuario2.jsp" class="MenuBarItemSubmenu">Administraci&oacute;n</a>
          <ul>
            <li><a href="AbonadoServlet">Abonados</a></li>
            <li><a href="CampanaServlet">Campa&ntilde;as</a></li>
            <li><a href="modificar_usuario.jsp">Empleados</a></li>
            <li><a href="ReportesServlet?action=listreportes">Reportes</a></li>
           	<li><a href="CampanaServlet?action=volverusuario">Cerrar Sesi&oacute;n</a></li>
          </ul>
        </li>
        <li><a href="noticias2.jsp">Noticias</a></li>
        <li><a href="soporte2.jsp">Soporte</a></li>

        <li><a href="contactanos2.jsp">Cont&aacute;ctanos</a></li>
</ul></TD>
    </TR>
    <TR>
      <TD height="169" valign="top"><img src="images/info_area.jpg" alt="back" width=178 height=320></TD>
    </TR>
  </TABLE>
</div>
<!--Jansondesigns.com offers an impressive collection of professionally made web templates, banner templates,
flash designs, free templates and free web graphics. We have templates that suit any personal or professional web site needs!! -->

<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</BODY>
</HTML>
